<template>
  <!--使用递归 显示多层的父评论 -->
  <div class="parent">
    <Parents v-if="parentData.parent" :parentData="parentData.parent" />
    <div class="top">
      <div class="info">
        <div class="name">{{ parentData.user.nickname }}</div>
        <div class="date">2小时前</div>
      </div>
      <div class="btnReply" @click="handleClick">回复</div>
    </div>

    {{ parentData.content }}
  </div>
</template>

<script>
// 导入事件总线
import eventVue from "../../event";
export default {
  props: ["parentData"],
  name: "Parents",
  methods: {
    handleClick() {
      // 监听点击回复事件处理多层父评论数据的传输
      // 使用事件总线 进行递归组件传输数据 传输当前评论的id
      eventVue.$emit("commentReply", this.parentData.id);
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  padding: 4/360 * 100vw;
  border: 1px solid #e4e4e4;
  .top {
    display: flex;
    align-items: center;
    margin-top: 10/360 * 100vw;
    .info {
      display: flex;
      flex: 1;
      align-items: center;
      .name {
        font-size: 14/360 * 100vw;
        color: #333;
      }
      .date {
        padding-left: 10/360 * 100vw;
        font-size: 12/360 * 100vw;
        color: #888;
      }
    }
    .btnReply {
      font-size: 12/360 * 100vw;
      color: #888;
      margin-top: 10/360 * 100vw;
    }
  }
}
</style>
